<template>
  <div class="WFooter">
    <!-- 底部上部分 -->
    <div class="WFooter-head">
      <div class="container">
        <!-- 第一块 -->
        <div class="item item-one">
          <div class="content">
            <h3>客服服务</h3>
            <a class="content-a content-a-one">
              <span class="content-icon iconfont icon-kefu"></span>
              <div class="content-text">在线客服</div>
            </a>
            <a class="content-a content-a-two">
              <span class="content-icon iconfont icon-fankui"></span>
              <div class="content-text">用户反馈</div>
            </a>
          </div>
        </div>
        <!-- 第二块 -->
        <div class="item item-two">
          <div class="item-two-top">
            <h4>何为网易严选</h4>
            <p>
              网易严选是深受新中产喜爱的生活方式品牌,
              为消费者提供一站式、全品类、全方位的美好生活解决方案。我们通过简约、实用、舒适的美学设计,
              不断带来高品质灵感好物,
              陪伴3000万新中产用户「活出自己喜欢的样子」,
              共同倡导多元化的生活价值主张——每个人都可以把生活的选择权交还给自己。
            </p>
          </div>
          <div class="item-two-bottom">
            <p>关注我们 :</p>
            <div class="item-two-icon">
              <div class="item-two-icon1">
                <span class="iconfont icon-yduixinlangweibo"></span>
              </div>
              <div class="item-two-icon1">
                <span class="iconfont icon-weixin"></span>
              </div>
              <div class="item-two-icon1">
                <span class="iconfont icon-pinpaibiaoshi_douyin"></span>
              </div>
            </div>
          </div>
        </div>
        <!-- 第三块 -->
        <div class="item item-three">
          <div>
            <h4>扫码下载严选APP</h4>
            <div class="item-three-img">
              <img src="@/assets/images/二维码.png" />
            </div>
            <div class="item-three-text">下载领大额新人红包</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部下部分 -->
    <div class="WFooter-footer">
      <div class="container">
        <ul class="footer-ul">
          <li class="footer-li footer-li-one">
            <span></span>
            <p>网易自营电商</p>
          </li>
          <li class="footer-li footer-li-two">
            <span></span>
            <p>30天无忧退换货</p>
          </li>
          <li class="footer-li">
            <span></span>
            <p>满99元免邮费</p>
          </li>
          <li class="footer-li">
            <span></span>
            <p>品质保证</p>
          </li>
        </ul>
        <div class="footer-border"></div>
        <div class="footer-bottom">
          <div class="footer-bottom-div">
            <a class="footer-bottom-a">关于我们</a>
            <b class="footer-b">|</b>
            <a class="footer-bottom-a">帮助中心</a>
            <b class="footer-b">|</b>
            <a class="footer-bottom-a">售后服务</a>
            <b class="footer-b">|</b>
            <a class="footer-bottom-a">配送与验收</a>
            <b class="footer-b">|</b>
            <a class="footer-bottom-a">商务合作</a>
            <b class="footer-b">|</b>
            <a class="footer-bottom-a">企业采购</a>
            <b class="footer-b">|</b>
            <a class="footer-bottom-a">开放平台</a>
            <b class="footer-b">|</b>
            <a class="footer-bottom-a">搜索推荐</a>
            <b class="footer-b">|</b>
            <a class="footer-bottom-a">友情链接</a>
            <b class="footer-b">|</b>
            <a class="footer-bottom-a">廉正举报</a>
          </div>
          <p class="footer-bottom-p1">
            <a class="footer-bottom-p-text">食品经营许可证：JY13301080111719</a>
            <a class="footer-bottom-p-text"
              >出版物经营许可证：新出发滨字第0132号</a
            >
            <span class="footer-bottom-p-text"
              >妙得ICP证号：ICP 证浙B2-20160106</span
            >
            <a class="footer-bottom-p-text">浙杭食药监械经营备20171029号</a>
            <a class="footer-bottom-p-text">营业执照</a>
            <span class="footer-bottom-p-text footer-bottom-p1-change"
              >网易公司版权所有 © 1997-</span
            >
            <span class="footer-bottom-p-text footer-bottom-p1-change"
              >2022</span
            >
          </p>
          <p class="footer-bottom-p2345">
            <span class="footer-bottom-p-text">
              <a class="footer-bottom-p-a"
                >无线电发射设备销售备案：42202011096855</a
              >
            </span>
            <span class="footer-bottom-p-text"
              >互联网药品信息服务资格证：（浙）-经营性-2022-0075</span
            >
            <span class="footer-bottom-p-text"
              >医疗器械网络交易第三方平台备案：（浙）网械平台备字[2020]第00029号</span
            >
          </p>
          <p class="footer-bottom-p2345">
            <span class="footer-bottom-p-text">
              <a class="footer-bottom-p-a">（浙杭）网械企备字[2019]第00119号</a>
            </span>
            <span class="footer-bottom-p-text"
              >（粤）网械平台备字（2019）第00004号</span
            >
            <span class="footer-bottom-p-text"
              >（粤）网械平台备字（2019）第00004号</span
            >
            <span class="footer-bottom-p-text">
              <a class="footer-bottom-p-a">进口冷链食品管理承诺书</a>
            </span>
          </p>
          <p class="footer-bottom-p2345">
            <span class="footer-bottom-p-text">
              <a class="footer-bottom-p-a">食品经营许可证：JY14207050007694</a>
            </span>
            <span class="footer-bottom-p-text"
              >浙江省网络食品销售第三方平台提供者备案：浙网食A33010009</span
            >
            <span class="footer-bottom-p-text">
              <a class="footer-bottom-p-a footer-bottom-p-a2"
                >单用途商业预付卡备案证：330100AAC0024</a
              >
              <a class="footer-bottom-p-a"><img src="@/assets/footer_05.png" alt=""></a>
            </span>
          </p>
          <p class="footer-bottom-p2345">
            <span class="footer-bottom-p-text"
              >出版物网络交易平台服务经营备案：新出发浙备字第2021006号</span
            >
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'WFooter',
}
</script>
<script setup lang="ts"></script>
<style scoped lang="less">
.WFooter {
  width: 100%;
  text-align: center;
  background-color: #999;
  color: #fff;
}
.WFooter-head {
  padding-top: 60px;
  padding-bottom: 34px;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
}
.WFooter-footer {
  height: 330px;
  padding-top: 37px;
  background-color: #414141;
}
.container {
  width: 1090px;
  margin: 0 auto;
  overflow: hidden;
}
.item {
  width: 33.33333%;
  height: 204px;
  float: left;
  box-sizing: border-box;
}
.item-one {
  text-align: center;
  border-right: 1px solid #e9e9e9;
}
.content h3 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 28px;
  color: #544333;
}
.content-a {
  display: inline-block;
  width: 80px;
  height: 100px;
  font-size: 14px;
  background-color: #fff;
  padding-top: 25px;
  text-align: center;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
  color: #333;
}
.content-a-two {
  margin-left: 29px;
}
.content-icon {
  display: inline-block;
  height: 26px;
  line-height: 26px;
  width: 31px;
  font-size: 35px;
}
.icon-fankui{
  font-size: 32px;
}
.content-text {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
}
.item-two {
  border-right: 1px solid #e9e9e9;
}
.item-two-top {
  padding: 0 37px;
  text-align: center;
}
.item-two-top h4 {
  color: #544333;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 28px;
}
.item-two-top p {
  color: #5a4939;
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 22px;
}
.item-two-bottom {
  overflow: hidden;
  text-align: left;
  padding: 0 37px;
}
.item-two-bottom p {
  color: #333;
  margin-right: 15px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 32px;
  float: left;
}
.item-two-icon {
  float: left;
}
.item-two-icon1 {
  display: inline-block;
  width: 35px;
  height: 35px;
  color: #333;
  margin-right: 15px;
  padding-bottom: 10px;
}
.item-two-icon1 span {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.item-three h4 {
  color: #544333;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 28px;
}
.item-three-img {
  display: inline-block;
  width: 104px;
  height: 104px;
  color: #544333;
}
.item-three-img img {
  width: 100%;
  height: 100%;
  background-color: #333;
}
.item-three-text {
  color: #b4a078;
  line-height: 18px;
  font-size: 12px;
  margin-top: 3px;
}
.footer-ul {
  margin-bottom: 30px;
  padding-left: 17px;
  overflow: hidden;
}
.footer-li {
  float: left;
  margin-left: 122px;
}
.footer-li-one {
  margin-left: 0;
}
.footer-border {
  height: 1px;
  margin-bottom: 27px;
  background-color: #4f4f4f;
  border: none;
}
.footer-li span {
  display: inline-block;
  margin-right: 17px;
  height: 50px;
  width: 50px;
  vertical-align: top;
  font-size: 12px;
  background-color: #fff;
}
.footer-li:first-child span{
  background-image: url(@/assets/footer_01.png);
  background-size: 100%;
}

.footer-li:nth-child(2) span{
  background-image: url(@/assets/footer_02.png);
  background-size: 100%;
}
.footer-li:nth-child(3) span{
  background-image: url(@/assets/footer_03.png);
  background-size: 100%;
}
.footer-li:nth-child(4) span{
  background-image: url(@/assets/footer_04.png);
  background-size: 100%;
}
.footer-li p {
  float: right;
  font-size: 18px;
  line-height: 51px;
}
.footer-bottom-a {
  font-size: 12px;
  color: #999;
}
.footer-b {
  margin: auto 13px;
  color: #999;
  font-size: 12px;
  vertical-align: bottom;
}
.footer-bottom-p1 {
  white-space: nowrap;
  margin: 11px 0;
}
.footer-bottom-p-text {
  color: #999;
  margin-right: 15px;
  font-size: 12px;
}
.footer-bottom-p1-change {
  margin-right: 0;
}
.footer-bottom-p2345 {
  padding-bottom: 11px;
}
.footer-bottom-p-a {
  color: #999;
}
.footer-bottom-p-a2 {
  margin-right: 10px;
}
.footer-bottom a:hover {
  color: #fff;
  cursor: pointer;
}
.icon-yduixinlangweibo{
  color: #D42D3B;
  font-size: 28px;
}
.icon-weixin{
  color: #66B23D;
  font-size: 25px;
}
.footer-bottom-p-a img{
  width: 20px;
  height: 20px;
}
.icon-pinpaibiaoshi_douyin{
  font-size: 25px;
}
</style>
